import React, { useState } from 'react';
import { delay } from '../../../../utils/utils';

import { IconNameType, SVGIcon, iconMap } from '@src/components/svg/svgIcon';
import { Input } from '@arco-design/web-react';
interface Props {
  value?: IconNameType;
  onChange?: (v?: string) => void;
}
export default function IconSelect({ value, onChange }: Props) {
  const [show, setShow] = useState(false);
  function handleChange(v: string, e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
    e.stopPropagation();
    e.preventDefault();
    if (onChange) {
      onChange(v);
    }
  }
  return (
    <div className="icon-select">
      <Input
        addAfter={value && <SVGIcon type={value} className="font-20 ml-10 mr-10" />}
        className="m-input after"
        value={value}
        onFocus={() => setShow(true)}
        onBlur={() => delay(200).then(() => setShow(false))}
      />

      {show ? (
        <div className="icon-dropdown">
          {Object.keys(iconMap).map((key) => (
            <div
              key={key}
              className={`icon-dropdown-item ${value === key ? 'active' : ''}`}
              onClick={(e) => handleChange(key, e)}
            >
              <SVGIcon type={key as IconNameType} className="font-20" />
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}
